<template>
  <div id="app">
    <!-- 认证页面（登录、注册）和管理后台使用独立布局 -->
    <router-view v-if="isAuthPage || isAdminPage" />
    
    <!-- 前台主应用布局 -->
    <template v-else>
      <!-- 顶部导航栏 -->
      <header class="app-header">
      <div class="header-content">
        <!-- Logo区域 -->
        <div class="header-logo">
          <h1 class="app-title" @click="$router.push('/')">
            <img src="/logo.png" alt="乐享作坊" width="40" height="40" class="app-logo">
            乐享作坊
          </h1>
        </div>

        <!-- 搜索栏 - 位于侧边栏和主内容之间 -->
        <div class="search-container">
          <div class="search-box" :class="{ focused: isSearchFocused }">
            <svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
              <path d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.749.749 0 01-.326 1.275.749.749 0 01-.734-.215L10.68 11.74zM11.5 7a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/>
            </svg>
            <input 
              v-model="searchQuery" 
              type="text" 
              placeholder="想听什么?"
              class="search-input"
              @input="onSearch"
              @focus="isSearchFocused = true"
              @blur="isSearchFocused = false"
              @keyup.enter="performSearch"
            >
            <button v-if="searchQuery" @click="clearSearch" class="clear-btn">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                <path d="M2.344 2.343a.5.5 0 01.707 0L8 7.293l4.95-4.95a.5.5 0 11.707.707L8.707 8l4.95 4.95a.5.5 0 01-.707.707L8 8.707l-4.95 4.95a.5.5 0 01-.707-.707L7.293 8 2.343 2.657a.5.5 0 010-.707z"/>
              </svg>
            </button>
          </div>
        </div>
        
        <!-- 右侧区域 -->
        <div class="header-right">
          <!-- 未登录状态 -->
          <div v-if="!isLoggedIn" class="auth-buttons">
            <router-link to="/users/register" class="register-btn">注册</router-link>
            <router-link to="/users/login" class="login-btn">登录</router-link>
          </div>
          
          <!-- 已登录状态 -->
          <div v-else class="user-menu" ref="userMenu">
            <div class="user-trigger" @click.stop="toggleUserDropdown">
              <div class="user-avatar">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                </svg>
              </div>
              <span class="user-name">{{ currentUser?.username || '用户' }}</span>
              
            </div>
            
            <!-- 下拉菜单 -->
            <div v-show="showUserDropdown" class="user-dropdown" @click.stop>
              <div class="dropdown-header">
                <div class="user-profile">
                  <div class="profile-avatar">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                    </svg>
                  </div>
                  <div class="profile-info">
                    <span class="profile-name">{{ currentUser?.username || '用户' }}</span>
                    <span class="profile-email">{{ currentUser?.email || '' }}</span>
                  </div>
                </div>
              </div>
              
              <div class="dropdown-menu">
                <router-link to="/users/settings" class="dropdown-item" @click="closeUserDropdown">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"/>
                  </svg>
                  账户
                </router-link>
                
                <router-link to="/users/settings" class="dropdown-item" @click="closeUserDropdown">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
                  </svg>
                  设置
                </router-link>
                
                <div class="dropdown-divider"></div>
                
                <button @click="logout" class="dropdown-item logout">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z"/>
                  </svg>
                  退出
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 侧边栏 -->
      <aside class="sidebar">
          <div class="sidebar-section">
            <ul class="sidebar-menu">
              <li><router-link to="/" class="sidebar-item">
                <svg class="sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12.5 3.247a1 1 0 00-1 0L4 7.577V20h4.5v-6a1 1 0 011-1h5a1 1 0 011 1v6H20V7.577l-7.5-4.33z"/>
                </svg>
                主页
              </router-link></li>
              <li><router-link to="/library" class="sidebar-item">
                <svg class="sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
                </svg>
                音乐库
              </router-link></li>
              <li><router-link to="/categories" class="sidebar-item">
                <svg class="sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M3 3h8v8H3V3zm0 10h8v8H3v-8zm10-10h8v8h-8V3zm0 10h8v8h-8v-8z"/>
                </svg>
                浏览分类
              </router-link></li>
            </ul>
          </div>
          
          <div class="sidebar-section">
            <h3>我的音乐库</h3>
            <ul class="sidebar-menu">
              <li><router-link to="/favorites" class="sidebar-item">
                <svg class="sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
                </svg>
                我的喜欢
              </router-link></li>
              <li><router-link to="/recent" class="sidebar-item">
                <svg class="sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                </svg>
                最近播放
              </router-link></li>
            </ul>
          </div>
        </aside>

      <!-- 主内容 -->
      <div class="main-view">
        <router-view />
      </div>
    </main>

    <!-- 底部播放器 - 只在前台页面显示 -->
    <MusicPlayer v-if="!isAdminPage && !isAuthPage" />

    <!-- Toast消息提示 -->
    <Toast 
      :visible="toast.visible"
      :message="toast.message"
      :type="toast.type"
      @close="closeToast"
    />
    
    <!-- 全局弹窗 -->
    <div v-if="globalModal.visible" class="confirm-overlay" @click="hideGlobalModal">
      <div @click.stop>
        <component :is="globalModal.component" v-bind="globalModal.props" @close="hideGlobalModal" />
      </div>
    </div>
    
    <!-- 确认对话框 -->
    <div v-if="confirmDialog.visible" class="confirm-overlay" @click="handleCancel">
      <div class="confirm-dialog" @click.stop>
        <div class="confirm-header">
          <h3>{{ confirmDialog.title }}</h3>
        </div>
        <div class="confirm-body">
          <p>{{ confirmDialog.message }}</p>
        </div>
        <div class="confirm-footer">
          <button @click="handleCancel" class="confirm-btn cancel">
            {{ confirmDialog.cancelText }}
          </button>
          <button @click="handleConfirm" class="confirm-btn confirm">
            {{ confirmDialog.confirmText }}
          </button>
        </div>
      </div>
    </div>
  </template>
  </div>
</template>

<script>
import MusicIcon from '@/components/MusicIcon.vue'
import Toast from '@/components/Toast.vue'
import ProfileEditModal from '@/components/ProfileEditModal.vue'
import PasswordChangeModal from '@/components/PasswordChangeModal.vue'
import PhoneBindModal from '@/components/PhoneBindModal.vue'
import DeleteAccountModal from '@/components/DeleteAccountModal.vue'
import LogoutConfirmModal from '@/components/LogoutConfirmModal.vue'
import MusicPlayer from '@/components/MusicPlayer.vue'

export default {
  components: {
    MusicIcon,
    Toast,
    ProfileEditModal,
    PasswordChangeModal,
    PhoneBindModal,
    DeleteAccountModal,
    LogoutConfirmModal,
    MusicPlayer
  },
  name: 'App',
  data() {
    return {
      searchQuery: '',
      isSearchFocused: false,
      isLoggedIn: false, // 将在mounted中根据localStorage设置
      showUserDropdown: false,
      currentUser: null,
      toast: {
        visible: false,
        message: '',
        type: 'info'
      },
      confirmDialog: {
        visible: false,
        title: '',
        message: '',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm: null,
        onCancel: null
      },
      toastTimer: null,
      globalModal: {
        visible: false,
        component: null,
        props: {}
      }
    }
  },
  computed: {
    isAuthPage() {
      // 判断是否是认证相关页面
      const authRoutes = ['/users/login', '/users/register', '/admin/login']
      return authRoutes.includes(this.$route.path)
    },
    isAdminPage() {
      // 判断是否是管理后台页面
      return this.$route.path.startsWith('/admin')
    }
  },
  
  watch: {
    // 监听路由变化，自动关闭下拉菜单
    '$route'() {
      this.closeUserDropdown()
    }
  },
  methods: {
    onSearch() {
      // 实时搜索逻辑
      if (this.searchQuery.trim()) {
        // 这里可以实现实时搜索建议
        console.log('搜索:', this.searchQuery)
      }
    },
    performSearch() {
      const query = this.searchQuery.trim()
      if (query) {
        this.$router.push({ 
          path: '/search', 
          query: { q: query } 
        })
      } else {
        // 如果搜索内容为空且当前在搜索页面，回到首页
        if (this.$route.path === '/search') {
          this.$router.push('/')
        }
      }
    },
    clearSearch() {
      this.searchQuery = ''
      // 清除搜索后，如果当前在搜索页面，回到首页
      if (this.$route.path === '/search') {
        this.$router.push('/')
      }
    },
    
    toggleUserDropdown() {
      this.showUserDropdown = !this.showUserDropdown
    },
    
    closeUserDropdown() {
      this.showUserDropdown = false
    },

    handleGlobalClick(event) {
      // 检查点击是否在用户菜单外部
      if (this.showUserDropdown && this.$refs.userMenu) {
        const userMenu = this.$refs.userMenu
        if (!userMenu.contains(event.target)) {
          this.closeUserDropdown()
        }
      }
    },
    
    logout() {
      // 关闭下拉菜单
      this.closeUserDropdown()
      // 显示自定义确认对话框
      this.showConfirmDialog(
        '退出登录',
        '确定要退出登录吗？退出后您需要重新登录才能访问个人功能。',
        () => {
          // 确认退出的回调
          this.performLogout()
        }
      )
    },
    
    showConfirmDialog(title, message, onConfirm, onCancel = null) {
      this.confirmDialog = {
        visible: true,
        title,
        message,
        confirmText: '确定',
        cancelText: '取消',
        onConfirm,
        onCancel
      }
    },
    
    handleConfirm() {
      if (this.confirmDialog.onConfirm) {
        this.confirmDialog.onConfirm()
      }
      this.confirmDialog.visible = false
    },
    
    handleCancel() {
      if (this.confirmDialog.onCancel) {
        this.confirmDialog.onCancel()
      }
      this.confirmDialog.visible = false
    },
    
    checkTokenExpiry() {
      const tokenExpiry = localStorage.getItem('tokenExpiry')
      if (tokenExpiry && Date.now() > parseInt(tokenExpiry)) {
        // Token已过期，自动登出
        this.logout()
        this.showToast('登录已过期，请重新登录', 'warning')
      }
    },
    
    loadUserInfo() {
      // 前台只加载普通用户信息
      const userToken = localStorage.getItem('userToken')
      
      if (userToken) {
        // 普通用户
        const userInfo = localStorage.getItem('userInfo')
        const username = localStorage.getItem('username')
        const userId = localStorage.getItem('userId')
        
        if (userInfo) {
          try {
            this.currentUser = JSON.parse(userInfo)
          } catch (e) {
            console.error('解析用户信息失败:', e)
            // 如果userInfo解析失败，尝试从其他localStorage项构建用户信息
            if (username && userId) {
              this.currentUser = {
                username: username,
                userId: userId,
                email: localStorage.getItem('userEmail') || ''
              }
            } else {
              this.currentUser = null
            }
          }
        } else if (username && userId) {
          // 如果没有完整的userInfo，但有基本信息，构建用户对象
          this.currentUser = {
            username: username,
            userId: userId,
            email: localStorage.getItem('userEmail') || ''
          }
        } else {
          this.currentUser = null
        }
      } else {
        // 前台未登录
        this.currentUser = null
      }
    },
    
    // 刷新登录状态 - 前台只处理普通用户登录
    async refreshLoginStatus() {
      try {
        // 只检查前台用户token，不管后台
        const userToken = localStorage.getItem('userToken')
        const userInfo = localStorage.getItem('userInfo')
        const userExpiry = localStorage.getItem('userTokenExpiry')
        
        console.log('前台刷新登录状态检查:', {
          hasUserToken: !!userToken,
          tokenLength: userToken?.length,
          hasUserInfo: !!userInfo,
          userExpiry,
          currentPath: this.$route?.path
        })
        
        // 如果没有前台用户token，保持未登录状态
        if (!userToken || userToken === 'null' || userToken === '') {
          console.log('无前台用户token，保持未登录状态')
          this.isLoggedIn = false
          this.userRole = null
          this.currentUser = null
          this.$store.commit('player/SET_FAVORITES', [])
          return
        }
        
        // 检查token有效性
        if (userToken.length <= 20) {
          console.log('前台Token无效，清理状态')
          this.clearUserLoginStatus()
          return
        }
        
        // 检查token是否过期
        if (userExpiry && Date.now() > parseInt(userExpiry)) {
          console.log('前台Token已过期，清理状态')
          this.clearUserLoginStatus()
          this.showToast('登录已过期，请重新登录', 'warning')
          return
        }
        
        console.log('设置前台登录状态')
        // 设置前台登录状态
        this.isLoggedIn = true
        this.userRole = 'USER'
        
        // 加载用户信息
        this.loadUserInfo()
        
        // 加载普通用户收藏列表
        console.log('加载普通用户收藏列表')
        try {
          await this.$store.dispatch('player/loadFavorites')
          console.log('收藏列表加载完成')
        } catch (favoriteError) {
          console.warn('加载收藏列表失败:', favoriteError)
          // 收藏列表加载失败不应该影响整个登录状态
          // 只要token有效，就保持登录状态
        }
        
        console.log('前台登录状态刷新完成:', { 
          isLoggedIn: this.isLoggedIn, 
          userRole: this.userRole,
          currentUser: this.currentUser ? this.currentUser.username : null
        })
        
      } catch (error) {
        console.error('刷新前台登录状态失败:', error)
        
        // 只有在明确的认证错误时才清理登录状态
        if (error.response?.status === 401 || 
            (error.message && error.message.includes('认证失败'))) {
          console.log('认证失败，清理登录状态')
          this.clearUserLoginStatus()
          this.showToast('登录状态异常，请重新登录', 'error')
        } else {
          console.log('其他错误，保持登录状态')
          // 其他错误（如网络错误）不清理登录状态
        }
      }
    },
    
    // 清理前台用户登录状态（不影响管理员登录）
    clearUserLoginStatus() {
      console.log('清理前台用户登录状态')
      this.isLoggedIn = false
      this.userRole = null
      this.currentUser = null
      
      // 只清理前台用户相关的存储
      localStorage.removeItem('userToken')
      localStorage.removeItem('userInfo')
      localStorage.removeItem('userId')
      localStorage.removeItem('username')
      localStorage.removeItem('userEmail')
      localStorage.removeItem('userTokenExpiry')
      
      // 为了兼容性，也清理旧的key
      localStorage.removeItem('token')
      localStorage.removeItem('userRole')
      localStorage.removeItem('tokenExpiry')
      
      // 清空收藏列表
      this.$store.commit('player/SET_FAVORITES', [])
    },

    // 清理前台登录状态（兼容旧接口）
    clearFrontendLoginStatus() {
      this.clearUserLoginStatus()
    },

    // 清理所有登录状态（完全清理）
    clearLoginStatus() {
      console.log('清理所有登录状态')
      this.isLoggedIn = false
      this.userRole = null
      this.currentUser = null
      
      // 清理所有本地存储
      localStorage.removeItem('userToken')
      localStorage.removeItem('adminToken')
      localStorage.removeItem('userInfo')
      localStorage.removeItem('adminInfo')
      localStorage.removeItem('userId')
      localStorage.removeItem('username')
      localStorage.removeItem('userEmail')
      localStorage.removeItem('userTokenExpiry')
      localStorage.removeItem('adminTokenExpiry')
      
      // 兼容旧key
      localStorage.removeItem('token')
      localStorage.removeItem('userRole')
      localStorage.removeItem('tokenExpiry')
      
      // 清空收藏列表
      this.$store.commit('player/SET_FAVORITES', [])
    },
    
    // 执行前台用户退出登录
    async performLogout() {
      try {
        console.log('执行前台用户退出登录')
        
        this.clearUserLoginStatus()
        this.showToast('退出登录成功', 'success')
        
        // 前台用户退出后跳转到首页
        this.$router.push('/')
        
      } catch (error) {
        console.error('退出登录失败:', error)
        // 即使退出失败也清理前台状态
        this.clearUserLoginStatus()
        this.showToast('退出登录完成', 'info')
        this.$router.push('/')
      }
    },
    
    showToast(message, type = 'info') {
      // 清除之前的Toast
      this.toast.visible = false
      
      // 等待一下再显示新的Toast，确保状态正确更新
      this.$nextTick(() => {
        this.toast = {
          visible: true,
          message,
          type
        }
        
        // 设置自动关闭定时器
        if (this.toastTimer) {
          clearTimeout(this.toastTimer)
        }
        
        this.toastTimer = setTimeout(() => {
          this.closeToast()
          this.toastTimer = null
        }, 3000)
      })
    },
    
    closeToast() {
      // 清除定时器
      if (this.toastTimer) {
        clearTimeout(this.toastTimer)
        this.toastTimer = null
      }
      
      // 关闭Toast
      this.toast.visible = false
      
      // 清空消息内容
      this.$nextTick(() => {
        this.toast.message = ''
        this.toast.type = 'info'
      })
    },
    
    provideToast() {
      // 提供全局toast方法给子组件
      this.$root.showToast = this.showToast
      this.$root.refreshLoginStatus = this.refreshLoginStatus
      this.$root.showGlobalModal = this.showGlobalModal
      this.$root.hideGlobalModal = this.hideGlobalModal
      this.$root.$http = this.$http
    },

    showGlobalModal(component, props = {}) {
      this.globalModal = {
        visible: true,
        component,
        props
      }
    },

    hideGlobalModal() {
      this.globalModal.visible = false
      this.globalModal.component = null
      this.globalModal.props = {}
    },
    
    // 检查并处理登录异常
    checkAndHandleLoginIssues() {
      try {
        // 检查是否有旧的冲突数据，清理它们
        const oldToken = localStorage.getItem('token')
        const oldUserRole = localStorage.getItem('userRole')
        const oldTokenExpiry = localStorage.getItem('tokenExpiry')
        
        if (oldToken || oldUserRole || oldTokenExpiry) {
          console.log('清理旧的登录数据，避免冲突')
          localStorage.removeItem('token')
          localStorage.removeItem('userRole')
          localStorage.removeItem('tokenExpiry')
        }
        
        // 检查新的token系统
        const userToken = localStorage.getItem('userToken')
        const userExpiry = localStorage.getItem('userTokenExpiry')
        
        // 如果有用户token但过期时间异常
        if (userToken && (!userExpiry || userExpiry === 'null' || userExpiry === '')) {
          console.warn('检测到用户token过期时间异常，清理数据')
          this.clearUserLoginStatus()
          this.showToast('登录时间设置异常已修复，请重新登录', 'info')
          return
        }
        
        // 如果token长度异常短
        if (userToken && userToken.length < 50) {
          console.warn('检测到异常用户token，清理数据')
          this.clearUserLoginStatus()
          this.showToast('登录凭证异常，请重新登录', 'warning')
          return
        }
        
        console.log('登录状态检查完成')
      } catch (error) {
        console.error('登录状态检查失败:', error)
        this.clearUserLoginStatus()
      }
    }
  },
  
  async mounted() {
    // 设置全局引用
    window.app = this
    
    // 提供全局方法
    this.provideToast()
    
    // 检查登录异常
    this.checkAndHandleLoginIssues()
    
    // 刷新登录状态
    await this.refreshLoginStatus()
    
    // 添加全局点击事件监听器，用于关闭下拉菜单
    document.addEventListener('click', this.handleGlobalClick)
    
    console.log('应用初始化完成')
  },

  beforeUnmount() {
    // 清理全局事件监听器
    document.removeEventListener('click', this.handleGlobalClick)
    
    // 清理定时器
    if (this.toastTimer) {
      clearTimeout(this.toastTimer)
    }
  }
}
</script>

<style>
/* 全局重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全局隐藏所有滚动条 */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

*::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}

html, body {
  overflow: hidden; /* 防止页面本身出现滚动条 */
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000000; /* 确保body背景为黑色，登录页面会自己设置渐变背景 */
}

#app {
  width: 100%;
  height: 100vh;
}

/* Spotify风格的深色主题样式 */
#app {
  background: #000000;
  color: #ffffff;
  min-height: 100vh;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 顶部导航栏 */
.app-header {
  background: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 16px 24px;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 100%;
  position: relative;
  justify-content: space-between;
}

/* Logo区域 */
.header-logo {
  display: flex;
  align-items: center;
  width: 248px; /* 8px + 240px侧边栏宽度 */
  flex-shrink: 0;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  margin-left: 8px; /* 与侧边栏左边距对齐 */
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-title:hover {
  color: #1DB954;
}

.app-logo {
  transition: all 0.2s ease;
  border-radius: 4px;
}

.app-title:hover .app-logo {
  transform: scale(1.1);
}

/* 搜索栏 */
.search-container {
  flex: 1;
  max-width: 500px;
  margin: 0 24px; /* 左右边距 */
  display: flex;
  justify-content: center;
}

.search-box {
  background: #242424;
  border: 1px solid transparent;
  border-radius: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 364px;
  height: 48px;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.search-box:hover {
  background: #2a2a2a;
  border-color: #535353;
}

.search-box.focused {
  background: #2a2a2a;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.search-icon {
  color: #a7a7a7;
  margin-left: 16px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.search-input {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  flex: 1;
  padding: 0 16px;
  outline: none;
  height: 100%;
}

.search-input::placeholder {
  color: #a7a7a7;
  font-weight: 400;
}

.clear-btn {
  background: none;
  border: none;
  color: #a7a7a7;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.clear-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* 右侧区域 */
.header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.auth-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.register-btn {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #000000;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.register-btn:hover {
  background: #f0f0f0;
  transform: scale(1.04);
}

.login-btn {
  background: #1DB954;
  border: 1px solid #1DB954;
  color: #000000;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.login-btn:hover {
  background: #1ed760;
  border-color: #1ed760;
  transform: scale(1.04);
}

/* 用户菜单 */
.user-menu {
  position: relative;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 23px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
}

.user-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: #282828;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
}

.user-name {
  color: white;
  font-size: 14px;
  font-weight: 700;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  background: #282828;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1001;
  margin-top: 8px;
  overflow: hidden;
}

.dropdown-header {
  padding: 16px;
  background: #1a1a1a;
  border-bottom: 1px solid #404040;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  background: #404040;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
}

.profile-info {
  flex: 1;
}

.profile-name {
  display: block;
  color: white;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.profile-email {
  display: block;
  color: #b3b3b3;
  font-size: 12px;
}

.dropdown-menu {
  padding: 8px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: white;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dropdown-item.logout {
  color: #ff6b6b;
}

.dropdown-item.logout:hover {
  background: rgba(255, 107, 107, 0.1);
}

.external-icon {
  margin-left: auto;
  color: #b3b3b3;
}

.dropdown-divider {
  height: 1px;
  background: #404040;
  margin: 8px 0;
}

/* 主内容区域 */
.main-content {
  position: fixed;
  top: 64px;
  left: 8px;
  right: 8px;
  bottom: 90px;
  display: flex;
  gap: 8px;
}

/* 侧边栏 */
.sidebar {
  width: 240px;
  background: #121212;
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-section {
  margin-bottom: 24px;
  padding: 8px;
}

.sidebar-section:first-child {
  padding-top: 16px;
}

.sidebar-section h3 {
  color: #b3b3b3;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding: 0 12px;
}

.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 12px;
  color: #b3b3b3;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin-bottom: 2px;
  font-weight: 500;
  font-size: 14px;
}

.sidebar-item:hover {
  color: #ffffff;
  background: #2a2a2a;
}

.sidebar-item.router-link-active {
  color: #ffffff;
  background: #2a2a2a;
}

.sidebar-icon {
  margin-right: 16px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* 主视图 */
.main-view {
  flex: 1;
  background: #121212;
  border-radius: 8px;
  overflow: hidden;
}

/* 旧的播放器样式已移除 */

.volume-range {
  width: 100%;
  height: 4px;
  background: #4d4d4d;
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

.volume-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
  }
  
  .player-content {
    flex-direction: column;
    gap: 8px;
    height: auto;
    padding: 16px;
  }
  
  .now-playing,
  .player-controls,
  .volume-control {
    width: 100%;
  }
  
  .volume-control {
    justify-content: center;
  }
}

/* Toast组件样式 */
.toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 10000;
}

/* 确认对话框样式 */
.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.confirm-dialog {
  background: #282828;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  max-width: 400px;
  width: 90%;
  overflow: hidden;
  animation: confirmDialogSlideIn 0.3s ease-out;
}

@keyframes confirmDialogSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.confirm-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #404040;
}

.confirm-header h3 {
  color: white;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.confirm-body {
  padding: 16px 24px 24px;
}

.confirm-body p {
  color: #b3b3b3;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.confirm-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.confirm-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.confirm-btn.cancel {
  background: #404040;
  color: white;
}

.confirm-btn.cancel:hover {
  background: #4a4a4a;
}

.confirm-btn.confirm {
  background: #1db954;
  color: white;
}

.confirm-btn.confirm:hover {
  background: #1ed760;
  transform: scale(1.02);
}
</style>
